<template>
	<view class="page-content">
		<default-navbar pageTitle="拜访详情"></default-navbar>
		<view class="main">
			<view class="detail">
				<view class="header">
					<view class="projectName">
						<view class="text">
							<i :class="['iconfont', 'projectStatus', expression()]">

							</i>
							<view class="t">
								{{ projectDetail.projectName }}
							</view>
						</view>
						<view class="putIcon" v-if="hasPermission('miniapp:visit:edit')">
							<i class="iconfont icon-xiugai" @click="editProject"></i>
						</view>
					</view>
					<view class="data">
						<view class="">{{ projectDetail.visitDate }}&nbsp;|&nbsp;<dict-tag :options="visit_cooperation_List_data" :dictValue="projectDetail.cooperationStatus"></dict-tag></view>
						<view class="">{{ projectDetail.visitContent }}</view>
					</view>
				</view>
				<view class="subHeader" v-if="projectDetail.remark">
					<view class="">{{ projectDetail.remark }} </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	//组件
	import defaultNavbar from "@/components/defaultNavbar/index.vue";
	import dictTag from "@/components/dictTag/index.vue";
	//接口
	import type { VisitItemResult } from "./types"
	import type { AddVisitParams } from "@/api/addVisit/types"
	import { visitItem } from "@/api/visitList/index"
	import { contactTitleList } from "@/api/common/index"
	//hooks
	import useAppHookds from "@/appHooks/useViewModel"
	let {
		getVisit_cooperation_List,
		visit_cooperation_List_data,
		hasPermission
	} = useAppHookds()
	//模拟的项目详情数据
	let projectDetail = ref<AddVisitParams>({
		projectName: '',
		enterpriseName: '',
		projectId: '',
		remark: '',
		visitContent: '',
		intentionLevel: '',
		cooperationStatus: '',
		visitDate: '',
		visitId: ""
	});

	//意向度icon
	let expression = () : string => {
		let { intentionLevel } = projectDetail.value
		if (intentionLevel == '3') {
			//一般
			return 'icon-dai'
		} else if (intentionLevel == '2') {
			//较好
			return 'icon-xiaolian'
		} else if (intentionLevel == '1') {
			//很好
			return 'icon-xiaolianwawa'
		} else if (intentionLevel == '4') {
			//较差
			return 'icon-kulian1'
		} else if (intentionLevel == '5') {
			//很差
			return 'icon-kulian'
		} else {
			return "--"
		}
	}


	//获取详情
	let getVisitItem = (visitId : string) : void => {
		visitItem(visitId).then(res => {
			let { data } = res as VisitItemResult
			projectDetail.value = data
		})
	}

	//去表单页
	let editProject = () : void => {
		let { visitId } = projectDetail.value
		uni.navigateTo({
			url: `/pages/addVisit/index?visitId=${visitId}`,
			events: {
				reloadDetail(visitId : string) {
					getVisitItem(visitId)
				}
			},
			success(res) {
				res.eventChannel.emit('eventChannel', "")
			}
		})
	}
	onShow(() => {
		let { visitId } = projectDetail.value
		if (visitId) getVisitItem(visitId)
	})
	onLoad(e => {
		let { visitId } = e
		if (visitId) {
			getVisitItem(visitId)
		}
	})
	onMounted(() => {
		getVisit_cooperation_List()
	})
</script>

<style lang="scss" scoped>
	.page-content {
		width: 100%;
		height: 100%;
		background: rgb(246, 246, 248);

		.main {
			display: block;
			flex: 1;
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;

			.scroll-view_H {
				height: 100%;
			}

			.detail {

				.header,
				.subHeader {
					background: rgba(41, 45, 116, 1);
					border-radius: 20rpx;
					overflow: hidden;
				}

				.header {
					.projectName {
						border-bottom: 1px solid rgb(117, 119, 169);
						padding: 30rpx;
						box-sizing: border-box;
						color: #fff;
						display: flex;
						flex-direction: row;
						align-items: center;
						justify-content: space-between;

						.text {
							width: calc(100% - 80rpx);
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: flex-start;

							.projectStatus {
								color: rgb(7, 219, 170);
								font-size: 45rpx;
								margin-right: 30rpx;
							}
							
							.iconfont {
								font-size: 45rpx;
							}
							
							.icon-dai {
								color: #feb122;
							}
							
							.icon-xiaolian {
								color: #cdf207;
							}
							
							.icon-xiaolianwawa {
								color: #04deb0;
							}
							
							.icon-kulian {
								color: #fc863b;
							}
							
							.icon-kulian1 {
								color: #ff4c4c;
							}
							

							.t {
								font-weight: bold;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}

						.icon {
							width: 80rpx;
							width: fit-content;
						}
					}

					.data {
						padding: 30rpx 30rpx 30rpx 105rpx;
						box-sizing: border-box;
						color: #fff;
						line-height: 50rpx;
					}
				}

				.subHeader {
					margin-top: 20rpx;
					padding: 30rpx 30rpx 30rpx 105rpx;
					box-sizing: border-box;
					color: #fff;
					line-height: 50rpx;
				}
			}

			.list {
				margin-top: 20rpx;
				background: #fff;
				box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
				border-radius: 20rpx;

				.table {

					.tabHeader .headerMain,
					.tabBody .item {
						.time {
							width: 220rpx;
						}

						.status {
							width: 180rpx;
						}

						.intention {
							width: 160rpx;
						}

						.operate {
							width: 40rpx;
						}
					}

					.tabHeader {
						.headerMain {
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							border-bottom: 1px solid #f2f1f5;
							padding: 30rpx 40rpx;
							box-sizing: border-box;
							color: #4240a0;
							font-weight: 700;
						}
					}

					.tabBody {
						padding: 30rpx 20rpx;
						box-sizing: border-box;

						.item {
							border: 1px solif #e8e8e9;
							padding: 40rpx 20rpx;
							background: #f9f9fb;
							display: flex;
							flex-direction: row;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 20rpx;
							border-radius: 10rpx;
							overflow: hidden;

							.intention {
								display: flex;
								flex-direction: row;
								align-items: center;
								justify-content: flex-start;

								.iconfont {
									font-size: 45rpx;
									margin-right: 10rpx;
								}

								.icon-xiaolianwawa {
									color: #06dcaf;
								}

								.icon-xiaolian {
									color: #cbf206;
								}

								.icon-dai {
									color: #ffb022;
								}

								.icon-kulian {
									color: #f58740;
								}

								.icon-kulian1 {
									color: #ff4955;
								}
							}
						}
					}
				}
			}
		}
	}
</style>